import '../../public.dart';
import '../wallet/wallet_card.dart';
import '../../widgets/carousel_widget.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});
  @override
  State<HomeScreen> createState() => _HomePageState();
}

class _HomePageState extends State<HomeScreen>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: SafeArea(child: _homeBody(context)),
    );
  }

  Widget _homeBody(BuildContext context) {
    return ProviderWidget<UserModel>(
      builder: (context, model, child) {
        if (!model.isInit) {
          // return HomeLoading();
        }
        return SingleChildScrollView(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              _buildHead(model),
              const SizedBox(height: 16),
              // 轮播图组件
              CarouselWidget(
                imageUrls: [
                  'https://picsum.photos/300/200?random=1',
                  'https://picsum.photos/300/200?random=2',
                  'https://picsum.photos/300/200?random=3',
                ],
                onTap: (index) {
                  print('点击了轮播图第${index + 1}张');
                  // 在这里处理点击事件
                  // 例如：导航到详情页面
                },
              ),
              const SizedBox(height: 16),
              // 钱包详情
              WalletCard(),
              const SizedBox(height: 16),
              // 待处理事项
              model.bankCardEmpty || model.hasPin == false
                  ? _buildPendingActions(model)
                  : SizedBox(),
              const SizedBox(height: 16),

              // 操作部分
              _buildActions(),
            ],
          ),
        );
      },
      model: Provider.of<UserModel>(context, listen: false),
    );
  }

  Widget _buildHead(UserModel model) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(12),
          topRight: Radius.circular(12),
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          // 左侧：用户头像和昵称
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ClipOval(
                child: Image.asset(
                  'assets/images/logo.png',
                  width: 50,
                  height: 50,
                ),
              ),
              const SizedBox(width: 8),
              Column(
                children: [
                  // 昵称
                  Text(
                    model.userInfo?.userName ?? '',
                    style: const TextStyle(
                      fontSize: 18,
                      color: Color(0xFF323232),
                      fontWeight: FontWeight.w500,
                    ),
                  ),

                  Text(
                    model.userInfo?.levelName ?? '',
                    style: const TextStyle(
                      fontSize: 16,
                      color: Color.fromARGB(221, 91, 235, 177),
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),
            ],
          ),

          // 右侧：消息铃铛
          GestureDetector(
            onTap: () {},
            child: const Icon(
              Icons.notifications,
              size: 32,
              color: Color(0xFF257CEE),
            ),
          ),
        ],
      ),
    );
  }

  // 待处理事项组件
  Widget _buildPendingActions(UserModel model) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withValues(alpha: 0.1),
            spreadRadius: 1,
            blurRadius: 3,
            offset: const Offset(0, 1),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题
          Padding(
            padding: const EdgeInsets.all(20),
            child: Text(
              'Pending Actions',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w600,
                color: Colors.grey[700],
              ),
            ),
          ),

          // 银行账户
          model.bankCardEmpty
              ? GestureDetector(
                  onTap: () async {
                    final isAdd = await RouterHelper.navigator.pushNamed(
                      Routers.addBankCard,
                    );
                    if (isAdd != null && isAdd as bool) {
                      await model.getBankCardList();
                    }
                  },
                  child: _buildPendingItem(
                    'Add default bank account',
                    'Add Bank',
                    Colors.blue,
                  ),
                )
              : SizedBox(),

          // PIN码
          model.hasPin == false
              ? _buildPendingItem(
                  'You haven\'t PIN yet.',
                  'Add PIN',
                  Colors.blue,
                )
              : SizedBox(),
        ],
      ),
    );
  }

  // 待处理事项单项
  Widget _buildPendingItem(String title, String actionText, Color actionColor) {
    return GestureDetector(
      onTap: () {
        RouterHelper.navigator.pushNamed(Routers.createPin);
      },
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        decoration: BoxDecoration(
          border: Border(top: BorderSide(color: Colors.grey.shade100)),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              title,
              style: const TextStyle(fontSize: 15, color: Color(0xFF323232)),
            ),
            Text(
              actionText,
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w500,
                color: actionColor,
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 操作部分组件
  Widget _buildActions() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Actions',
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w600,
            color: Colors.grey[700],
          ),
        ),
        const SizedBox(height: 12),

        GestureDetector(
          onTap: () {
            RouterHelper.navigator.pushNamed(Routers.sellGiftCard);
          },
          child: _buildActionCard(
            'Sell Gift Cards',
            'Gift Cards 🔥🔥🔥',
            Colors.amber.shade100,
            const Color(0xFFF9A826),
          ),
        ),
        const SizedBox(height: 12),

        GestureDetector(
          onTap: () {
            RouterHelper.navigator.pushNamed(Routers.topGiftCards);
          },
          child: _buildActionCard(
            'Top Gift Cards',
            'Cards with High Rates',
            Colors.green.shade50,
            const Color(0xFF34A853),
          ),
        ),
      ],
    );
  }

  // 操作卡片组件
  Widget _buildActionCard(
    String title,
    String subtitle,
    Color bgColor,
    Color iconColor,
  ) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: bgColor,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.1),
            spreadRadius: 1,
            blurRadius: 3,
            offset: const Offset(0, 1),
          ),
        ],
      ),
      child: Row(
        children: [
          // 图标
          Container(
            width: 50,
            height: 50,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Icon(
              title.contains('Sell')
                  ? Icons.card_giftcard_outlined
                  : Icons.star_outline,
              color: iconColor,
              size: 30,
            ),
          ),
          const SizedBox(width: 12),

          // 文字内容
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                    color: Color(0xFF323232),
                  ),
                ),
                Text(
                  subtitle,
                  style: const TextStyle(
                    fontSize: 14,
                    color: Color(0xFF666666),
                  ),
                ),
              ],
            ),
          ),

          // 箭头
          const Icon(
            Icons.arrow_forward_ios,
            color: Color(0xFF666666),
            size: 18,
          ),
        ],
      ),
    );
  }
}
